<template>
  <div class="footer">
    <h1>这是二级菜单对应的详情</h1>
    <div class="articleList">
      <div class="articleListItem" v-for="item in articleList" :key="item.id">
        <h3>{{item.title}}</h3>
        <p>分享人：{{item.shareUser}}, 分类：{{item.chapterName}} / {{item.superChapterName}}, 时间：{{item.niceShareDate}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getSystemDetail } from '../api'

export default {
  beforeRouteEnter(to, from, next){
    // 守卫工作
    // console.log(to, from);
    // 当前路由守卫的钩子函数内，无法通过this获取组件实例
    // console.log(this);
    next(vm=>{
      console.log(vm)
    });
  },
  beforeRouteUpdate(to, from, next){
    // 只是更新路由中的数据，但路由还停留在当前位置
    // 获取更新之后的路由中的数据
    // console.log(to, from);
    console.log(this);
    next();
  },
  beforeRouteLeave(to, from, next){
    // 离开当前路由，销毁当前实例，节省性能
    // console.log(to, from);
    console.log(this);
    next();
  },
  name: "Detail",
  props: ["id"],
  data(){
    return {
      articleList:[]
    }
  },
  created() {
    getSystemDetail(this.$route.params.id).then(res=>{
      this.articleList = res.data.data.datas
      console.log(this.articleList)
    })
  },
  mounted() {
    console.log("路由传参：", this.id)
    console.log("路由元数据：", this.$route.meta)
  },
  watch:{
    $route(to, from){
      getSystemDetail(to.params.id).then(res=>{
        this.articleList = res.data.data.datas
      })
    }
  }
}
</script>